<template>
  <div>
    <p class="title">-- 找回密码 --</p>
    <el-form :model="retrieveForm" :rules="retrieveRules" size="mini" ref="retrieveForm" label-width="auto" :hide-required-asterisk="true">
      <el-form-item prop="phone">
        <el-input v-model="retrieveForm.phone" placeholder="请输入手机号码">
          <el-button slot="suffix" type="text" @click="codeClick">
            {{ countDown ? '有效期' + countDown + 'S' : getCode }}
          </el-button>
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="retrieveForm.code" placeholder="请输入短信验证码"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input v-model="retrieveForm.pwd" placeholder="请输入新密码(6-14位字母和数字组合)" autocomplete="new-password" show-password></el-input>
      </el-form-item>
      <el-form-item prop="confirmPwd">
        <el-input v-model="retrieveForm.confirmPwd" placeholder="请确认新密码" autocomplete="new-password" show-password></el-input>
      </el-form-item>
      <p class="success" @click="handleFindPwd('retrieveForm')">提 交</p>
    </el-form>
  </div>
</template>

<script>
import { checkCode, findUserPwd } from "@/api/login";
import { validatePhone, validatePassword } from "@/utils/validate";

export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value && value !== this.retrieveForm.pwd) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback()
      }
    };
    return {
      retrieveForm: {
        phone: '',
        code: '',
        pwd: '',
        confirmPwd: ''
      },
      retrieveRules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
      },
      time: null,
      getCode: '获取验证码',
      countDown: 0,
    }
  },
  methods: {
    handleCountDown(second) {
      this.countDown = second
      clearInterval(this.time)
      this.time = setInterval(() => {
        const times = localStorage.getItem('infoTime')
        this.countDown = second - Math.floor((Date.now() - times) / 1000)
        if (this.countDown <= 0) {
          clearInterval(this.time)
          localStorage.removeItem('infoTime')
          this.countDown = 0
          this.getCode = '重新发送'
        }
      }, 1000)
    },
    async codeClick() {
      if (this.countDown) {
        this.message.warning(`请${this.countDown}秒后操作`)
        return
      }
      if (!this.retrieveForm.phone) {
        this.message.error("请先输入正确格式的授权人手机号");
        this.$refs[form].validateField("phone");
        return
      }
      const res = await checkCode({ phone: this.retrieveForm.phone })
      if (res.code === 200) {
        localStorage.setItem('infoTime', Date.now())
        this.handleCountDown(60)
      }
    },
    // 重置密码
    handleFindPwd (formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const { phone, code, pwd } = this.retrieveForm
          const params = {
            phone,
            code,
            pwd
          }
          const res = await findUserPwd(params)
          if (res.code === 200) {
            this.message.success('密码重置完成请重新登录')
            this.back()
          }
        }
      })
    },
    back() {
      this.$store.commit("SET_TOKEN", "");
      this.storage.removeToken();
      this.$store.commit("XBSG_SET_USERINFO", "");
      this.storage.remove("xbsgUserInfo");
      this.$router.push({
        path: "/login",
      });
    },
  },
}
</script>

<style scoped lang="scss">
@import "@/style/color.scss";
.title {
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
}
.success {
  width: 100%;
  height: 30px;
  background: $blueColor;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
</style>